<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>test table</title>
		<script type="text/javascript" src="../js/jquery-3.3.1.slim.min.js"></script>
		<link type="text/css" rel="stylesheet" href="../css/bootstrap.min.css" />
		<link type="text/css" rel="stylesheet" href="../css/common.css" />
	</head>
	<body>
		<div>
			<table id="table1">
				<tr>
					<td>2222</td>
				</tr>
				<tr>
					<td>3333</td>
				</td>
			</table>
		</div>
		<div>
			<button class="btn btn-success" onclick="insertTr()">insert</button>
		</div>
		<div>
			<table>
				<tr>
					<tr><td>111</td></tr>
					<tr><td>222</td></tr>
				</tr>
					
				<tr>
					<tr><td>444</td></tr>
					<tr><td>555</td></tr>
					<tr><td>666</td></tr>
				</tr>
				<tr>
					<tr><td>777</td></tr>
					<tr><td>888</td></tr>
					<tr><td>999</td></tr>
				</tr>
			</table>
		</div>
		<div><hr/></div>
		
		
		<!--div比table大小要小才会显示-->
		 <div style="overflow-x: auto; overflow-y: auto; height: 100px; width:300px;">
			<table id="table" border="1" align="center" width="300px" height="200px">
				<tbody>
				   <tr><td>00</td><td>01</td><td>02</td><td>03</td><td>04</td><td>05</td></tr>
				   <tr><td>10</td><td>11</td><td>12</td><td>13</td><td>15</td><td>15</td></tr>
				   <tr><td>20</td><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td></tr>
				   <tr><td>30</td><td>31</td><td>32</td><td>33</td><td>34</td><td>35</td></tr>
				</tbody>
			</table>
		  </div>
		
		
	</body>
	<script type="text/javascript">
		function insertTr() {
			$("#table1")
		}
	</script>
</html>
